import React from 'react'
import { Button, Form, Input, NavBar } from 'antd-mobile'
import { CameraOutline } from 'antd-mobile-icons'

const App = () => {
  return (
    <div>
      <NavBar>新增乘客</NavBar>
      <div>
        <Button
          block
          color='primary'
          size='large'
          fill='outline'
        >
          <span>
            <CameraOutline />
            扫描证件添加
          </span>
        </Button>

        <Form
          footer={
            <Button block type='submit' color='primary' size='large' shape='rounded'>
              提交
            </Button>
          }
        >
          <Form.Item
            name='p_type'
            label='乘客类型'
            rules={[{ required: true, message: '乘客类型不能为空' }]}
          >
            <Input placeholder='请输入乘客类型'></Input>
          </Form.Item>

          <Form.Item
            name='name'
            label='乘客姓名'
            rules={[{ required: true, message: '乘客姓名不能为空' }]}
          >
            <Input placeholder='请输入乘客姓名'></Input>
          </Form.Item>

          <Form.Item
            name='c_type'
            label='证件类型'
            rules={[{ required: true, message: '证件类型不能为空' }]}
          >
            <Input placeholder='请输入证件类型'></Input>
          </Form.Item>

          <Form.Item
            name='card_no'
            label='证件号码'
            rules={[{ required: true, message: '证件号码不能为空' }]}
          >
            <Input placeholder='请输入证件号码'></Input>
          </Form.Item>

          <Form.Item
            name='phone'
            label='手机号码'
            rules={[{ required: true, message: '手机号码不能为空' }]}
          >
            <Input placeholder='请输入手机号码'></Input>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default App
